import React, {Component} from 'react';
import './index.less';
import {base} from 'nc-lightapp-front';
import Pagination from "../../../../../../hrpub/common/components/Pagination";
import {debounce} from "../../../../../../hrpub/common/utils/utils";

class MainTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tableHeight: ''
        };
        this.changePage = this.changePage.bind(this);
        this.pageSizeChange = this.pageSizeChange.bind(this);
        this.rowClickHandle = this.rowClickHandle.bind(this);
        this.rowDoubleClickHandle = this.rowDoubleClickHandle.bind(this);
        this.setTableHeight = this.setTableHeight.bind(this);
    }

    componentDidMount() {
        this.setTableHeight();
        window.addEventListener("resize", debounce(this.setTableHeight));
    }

    changePage(pageIndex) {
        const {
            updateState,
            getMainTableData,
            pageInfo
        } = this.props;

        updateState({
            pageInfo: {
                ...pageInfo,
                pageIndex: pageIndex
            }
        }, () => {
            getMainTableData();
        });
    }

    rowClickHandle(props, moduleId, record, index, e) {
        this.props.updateState({
            selectedPsn: record.pk_psnjob.value,
            selectedPsnPk: record.pk_psndoc.value,
            focusedRow: index
        })
    }

    rowDoubleClickHandle(record, index, props, e) {
        this.props.updateState({
            selectedPsn: record.pk_psnjob.value,
            selectedPsnPk: record.pk_psndoc.value,
            focusedRow: index
        })
    }

    pageSizeChange(pageSize) {
        const {
            updateState,
            getMainTableData,
            pageInfo
        } = this.props;

        updateState({
            pageInfo: {
                ...pageInfo,
                pageSize,
                pageIndex: 1
            }
        }, () => {
            getMainTableData();
        });
    }

    setTableHeight() {
        const mainTable = document.getElementsByClassName('main-table');
        if (mainTable[0]) {
            this.setState({
                tableHeight: mainTable[0].clientHeight - 66
            })
        }
    }

    onSelected = (props, moduleId, record, index, isSelected) => {
        this.props.updateState({
            selectedPsn: record.pk_psnjob.value,
            selectedPsnPk: record.pk_psndoc.value,
            focusedRow: index
        })
    };

    render() {
        const {table, pageInfo, disabledAll, focusedRow} = this.props;

        return (
            <div className='main-table'>
                {disabledAll ? <div className='disabled-mask'/> : null}
                {table.createSimpleTable('info', {
                    showIndex: true,
                    height: this.state.tableHeight,
                    showCheck: true,
                    onRowClick: this.rowClickHandle,
                    onRowDoubleClick: this.rowDoubleClickHandle,
                    onSelected: this.onSelected,
                    rowClassList: [{
                        index: focusedRow,
                        className: 'table-focused-row'
                    }]
                })}
                {
                    pageInfo.total > 0 &&
                    <Pagination
                        current={parseInt(pageInfo.pageIndex)}
                        pageSize={parseInt(pageInfo.pageSize)}
                        pageSizeOptions={[5, 10, 20, 50, 100]}
                        showSizeChanger={true}
                        total={pageInfo.total}
                        onShowSizeChange={this.pageSizeChange}
                        onChange={this.changePage}
                    />
                }
                {/*<Pagination
                    {...this.props}
                    pageInfo={pageInfo}
                    onPageChange={this.changePage}
                    onPageSizeChange={this.pageSizeChange}/>*/}
            </div>
        );
    }
}

export default MainTable;
